<template>
  <view class="category-swiper">
    <swiper 
      class="swiper-container"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      circular
    >
      <swiper-item v-for="(group, index) in categoryGroups" :key="index">
        <view class="category-group">
          <view class="category-item" 
            v-for="item in group" 
            :key="item.id" 
            @click="onCategoryClick(item.id)"
          >
            <image :src="item.icon" mode="aspectFit"></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    categoryList: {
      type: Array,
      default: () => [
        { id: 1, name: '玻尿酸', icon: '/static/hyaluronic_acid.jpg' },
        { id: 2, name: '鼻部', icon: '/static/nose.jpg' },
        { id: 3, name: '眼部', icon: '/static/eyes.jpg' },
        { id: 4, name: '美肤', icon: '/static/skin_care.jpg' },
        { id: 5, name: '美体塑形', icon: '/static/body_shaping.jpg' }
      ]
    }
  },
  computed: {
    categoryGroups() {
      const groups = []
      const itemsPerPage = 5 // 每页显示5个分类
      
      for (let i = 0; i < this.categoryList.length; i += itemsPerPage) {
        groups.push(this.categoryList.slice(i, i + itemsPerPage))
      }
      
      return groups
    }
  },
  methods: {
    onCategoryClick(id) {
      this.$emit('category-click', id)
    }
  }
}
</script>

<style scoped>
.category-swiper {
  width: 100%;
  background-color: #FFF;
}

.swiper-container {
  height: 120px;
}

.category-group {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
}

.category-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

image {
  width: 45px;
  height: 45px;
  margin-bottom: 5px;
  border-radius: 50%;
}

text {
  font-size: 12px;
  color: #333;
}
</style>